﻿.tree-view {
    position: relative;
    --bb-tree-padding: 0;
    --bb-tree-margin: 0;
    --bb-tree-ul-padding-left: 20px;
    --bb-tree-item-margin: 1px 0;
    --bb-tree-icon-width: 22px;
    --bb-tree-check-margin: 0 4px;
    --bb-tree-node-padding: .25rem .5rem;
    --bb-tree-item-active-color: #409eff;
    --bb-tree-item-active-bg: #e9ecef;
    --bb-tree-item-hover-bg: var(--bs-secondary);
}

    .tree-view .tree-root {
        padding: var(--bb-tree-padding);
        margin: var(--bb-tree-margin);
    }

    .tree-view .tree-ul {
        padding: 0 0 0 var(--bb-tree-ul-padding-left);
        display: none;
    }

        .tree-view .tree-ul.show {
            display: block;
        }

    .tree-view .tree-item {
        list-style: none;
        cursor: pointer;
        margin: var(--bb-tree-item-margin);
    }

        .tree-view .tree-item .tree-content {
            position: relative;
            display: flex;
            align-items: center;
        }

            .tree-view .tree-item .tree-content .fa-caret-right {
                width: 18px;
                height: 18px;
                transition: transform .3s linear;
                display: flex;
                align-items: center;
                justify-content: center;
                visibility: hidden;
            }

            .tree-view .tree-item .tree-content .show .fa-caret-right {
                transform: rotate(90deg);
            }

    .tree-view .tree-node {
        display: inline-flex;
        align-items: center;
        padding: var(--bb-tree-node-padding);
        border-radius: var(--bs-border-radius);
        flex: 1;
    }

        .tree-view .tree-node.disabled,
        .tree-view .tree-item.disabled > .tree-content > .fa-caret-right {
            opacity: var(--bb-disabled-opactiy);
        }

        .tree-view .tree-node:hover {
            background-color: var(--bb-tree-item-hover-bg);
        }

    .tree-view .form-check {
        margin: var(--bb-tree-check-margin);
    }

    .tree-view .tree-icon {
        width: var(--bb-tree-icon-width);
        text-align: center;
    }

    .tree-view .tree-item:not(.disabled).active > .tree-content > .tree-node {
        color: var(--bb-tree-item-active-color);
        background-color: var(--bb-tree-item-active-bg);
    }
